﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="../demo2 - 复制/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var headHeight=$(".header").height()+10;
        var nav=$(".nav");
        $(window).scroll(function() {
            if ($(this).scrollTop() > headHeight) {
                nav.addClass("navFix");
            } else {
                nav.removeClass("navFix");
            }
        });
    })
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            _background-attachment: fixed;
            _background-image: url(about:blank);
        }

        /*实现ie6不支持fixed方法*/
         .header {
            width: 1000px;
            height: 60px;
            margin: 0 auto;
            text-align: center;
        }

        .nav {
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
            height: 30px;
            width: 1000px;
            margin: 10px auto;
            background: #fff;
        }

            .nav li {
                float: left;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
            }

                .nav li a {
                    text-decoration: none;
                    color: #0CF;
                }

                    .nav li a:hover {
                        color: #000;
                        text-decoration: underline;
                    }

            .nav ul {
                list-style: none;
            }

        .navFix {
            position: fixed;
            left: 0;
            top: 0;
            _position: absolute;
            top: expression((offsetParent.scrollTop)+0);
            z-index: 2;
        }

        /*实现ie6不支持fixed方法*/ 
        .content {
            width: 1000px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>导航固定在页面顶部测试</h1>
    </div>
    <div class="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">蓝枫前端</a></li>
            <li><a href="">蓝枫前端</a></li>
            <li><a href="">蓝枫前端</a></li>
            <li><a href="">蓝枫前端</a></li>
            <li><a href="">蓝枫前端</a></li>
            <li><a href="">蓝枫前端</a></li>
            <li><a href="">蓝枫前端</a></li>
        </ul>
    </div>
    <div class="content">
        <p>11111</p>
        <p>11111</p>
        <p>11111</p><p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
    </div>
</body>
</html>